<template>
<div>
  <el-dialog title="编辑收费" width="40%" :destroy-on-close="true" :visible.sync="updateVisible" :before-close="handleClose">
      <div id="print">
          <div style="font-size:20px;font-weight:bold">小区物业收费单据</div>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <span class="search-title">
                    收费类型:
                    </span>
                <div style="width:100%;margin-left:20px">
                    {{form.type}}
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <span class="search-title">
                    业主:
                    </span>
                <div style="width:100%;margin-left:20px">
                    {{form.userName}}
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <span class="search-title">
                    金额:
                    </span>
                <div style="width:100%;margin-left:20px">
                    {{form.price}}
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <span class="search-title">
                    创建人:
                    </span>
                <div style="width:100%;margin-left:20px">
                    {{form.createBy}}
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <span class="search-title">
                    创建时间:
                    </span>
                <div style="width:100%;margin-left:20px">
                    {{form.createTime}}
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <span class="search-title">
                    备注:
                    </span>
                <div style="width:100%;margin-left:20px">
                    {{form.remark}}
                </div>
            </el-col>
        </el-row>
      </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="submit">打 印</el-button>
      <el-button size="mini" @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
  import print from 'print-js'
  import {editChargeList,getChargeListById} from '../../../api/api'
  export default {
    data() {
      return{
        formLabelWidth: '80px',
        form: {
          type: "",
          userId: "",
          price: "",
          remark: "",
        },
      }
    },
    props: ['updateVisible','updateId'],
    methods: {
      submit() {
        const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
        printJS({
            printable: 'print',// 标签元素id
            type: 'html',
            header: '',
            targetStyles: ['*'],
            style
        });
      },
      handleClose() {
        this.$emit("updateFalse")
      },
     
    },
    created() {
     
    },
    mounted() {

    },
    watch: {
      updateId(newVal) {
        if(newVal) {
          getChargeListById({id:newVal}).then(res => {
            if(res.code == 1000) {
              this.form = res.data
            } else {
              this.$notify.error({
                title: '错误',
                message: res.message
              });
            }
          })
        }
        
      }
    }
 }
</script>

<style lang=scss scoped>
  .el-col {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 24px
  }
  .search-title {
      font-family: '黑体';
      float: right;
      white-space: nowrap;
      font-size: 14px;
      width: 84px;
      text-align: right;
  }
  .el-tree {
      border: 1px solid #BDC1C9;
  }
</style>